<template>
    <div class="app-container">
        <el-form :inline="true" :model="queryParams" label-width="68px" ref="queryForm" v-show="showSearch">
            <el-form-item label="项目编码" prop="code">
                <el-input
                        @keyup.enter.native="handleQuery"
                        clearable
                        placeholder="请入项目编码"
                        size="small"
                        v-model="queryParams.code"
                />

            </el-form-item>
            <el-form-item label="项目名称" prop="name">
                <el-input
                        @keyup.enter.native="handleQuery"
                        clearable
                        placeholder="请输入项目名称"
                        size="small"
                        v-model="queryParams.name"
                />
            </el-form-item>
            <el-form-item label="助记码" prop="mnemonicCode">
                <el-input
                        @keyup.enter.native="handleQuery"
                        clearable
                        placeholder="请输入拼音助记码"
                        size="small"
                        v-model="queryParams.mnemonicCode"
                />
            </el-form-item>
            <el-form-item label="项目类型" prop="recordType">
              <el-select clearable placeholder="请选择项目类型" size="small" v-model="queryParams.recordType">
                <el-option
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                  v-for="dict in recordTypeOptions"
                />
              </el-select>
            </el-form-item>
          <el-form-item label="执行科室" prop="deptId">
            <treeselect :disable-branch-nodes="true" :options="deptOptions" :show-count="true" placeholder="请选择执行科室"
                        style="width: 200px" v-model="queryParams.deptId"/>
          </el-form-item>
          <!--<el-form-item label="执行科室" prop="deptId">
              <el-select clearable placeholder="请选择执行科室ID" size="small" v-model="queryParams.deptId">
                  <el-option
                          :key="item.deptId"
                          :label="item.deptName"
                          :value="item.deptId"
                          v-for="item in deptList"
                  ></el-option>
              </el-select>
          </el-form-item>-->
          <el-form-item class="top-right-btn" style="padding-right: 150px">
            <el-button @click="handleQuery" icon="el-icon-search" size="mini" type="cyan">搜索</el-button>
            <el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        @click="handleAdd"
                        icon="el-icon-plus"
                        size="mini"
                        type="primary"
                        v-hasPermi="['dms:non_drug:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        :disabled="single"
                        @click="handleUpdate"
                        icon="el-icon-edit"
                        size="mini"
                        type="success"
                        v-hasPermi="['dms:non_drug:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        :disabled="multiple"
                        @click="handleDelete"
                        icon="el-icon-delete"
                        size="mini"
                        type="danger"
                        v-hasPermi="['dms:non_drug:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        @click="handleExport"
                        icon="el-icon-download"
                        size="mini"
                        type="warning"
                        v-hasPermi="['dms:non_drug:export']"
                >导出
                </el-button>
            </el-col>
            <div class="top-right-btn">
                <el-tooltip class="item" content="刷新" effect="dark" placement="top">
                    <el-button @click="handleQuery" circle icon="el-icon-refresh" size="mini"/>
                </el-tooltip>
                <el-tooltip :content="showSearch ? '隐藏搜索' : '显示搜索'" class="item" effect="dark" placement="top">
                    <el-button @click="showSearch=!showSearch" circle icon="el-icon-search" size="mini"/>
                </el-tooltip>
            </div>
        </el-row>

        <el-table :data="non_drugList" @selection-change="handleSelectionChange" v-loading="loading">
            <el-table-column align="center" type="selection" width="55"/>
            <el-table-column align="center" label="项目编码" prop="code"/>
            <el-table-column align="center" label="项目名称" prop="name"/>
            <el-table-column align="center" label="规格" prop="format"/>
            <el-table-column align="center" label="价格" prop="price"/>
            <el-table-column align="center" label="拼音助记码" prop="mnemonicCode"/>
            <el-table-column :formatter="recordTypeFormat" align="center" label="项目类型" prop="recordType"/>
            <el-table-column align="center" label="创建时间" prop="createDate" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="执行科室" prop="deptName"/>
            <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                    <el-button
                            @click="handleUpdate(scope.row)"
                            icon="el-icon-edit"
                            size="mini"
                            type="text"
                            v-hasPermi="['dms:non_drug:edit']"
                    >修改
                    </el-button>
                    <el-button
                            @click="handleDelete(scope.row)"
                            icon="el-icon-delete"
                            size="mini"
                            type="text"
                            v-hasPermi="['dms:non_drug:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                :limit.sync="queryParams.pageSize"
                :page.sync="queryParams.pageNum"
                :total="total"
                @pagination="getList"
                v-show="total>0"
        />

        <!-- 添加或修改非药品收费项目对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
            <el-form :model="form" :rules="rules" label-width="80px" ref="form">
                <el-form-item label="项目名称" prop="name">
                    <el-input placeholder="请输入项目名称" v-model="form.name"/>
                </el-form-item>
                <el-form-item label="规格" prop="format">
                    <el-input placeholder="请输入规格" v-model="form.format"/>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input placeholder="请输入价格" v-model="form.price"/>
                </el-form-item>
                <el-form-item label="助记码" prop="mnemonicCode">
                    <el-input placeholder="请输入拼音助记码" v-model="form.mnemonicCode"/>
                </el-form-item>
              <el-form-item label="项目类型">
                <el-select placeholder="请选择项目类型" v-model="form.recordType">
                  <el-option
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="parseInt(dict.dictValue)"
                    v-for="dict in recordTypeOptions"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="执行科室" prop="deptId">
                <treeselect :disable-branch-nodes="true" :options="deptOptions" :show-count="true" placeholder="请选择执行科室"
                            v-model="form.deptId"/>
              </el-form-item>
              <!--<el-select clearable placeholder="请选择执行科室" size="small" v-model="form.deptId">
                  <el-option
                          :key="item.deptId"
                          :label="item.deptName"
                          :value="parseInt(item.deptId)"
                          v-for="item in deptList"
                  ></el-option>
              </el-select>-->
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="submitForm" type="primary">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import {
    addNon_drug,
    delNon_drug,
    exportNon_drug,
    getNon_drug,
    listNon_drug,
    updateNon_drug
  } from "@/api/dms/non_drug";
  import {listDept, treeselect} from "@/api/system/dept"; //需要调用科室（部门）控制器
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Non_drug",
    components: {Treeselect},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 非药品收费项目表格数据
                non_drugList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 项目类型字典
                recordTypeOptions: [],
                // 执行科室数据
                deptList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          code: null,
          name: null,
          mnemonicCode: null,
          recordType: null,
          deptId: null
        },
        // 部门树选项
        deptOptions: undefined,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: "项目名称不能为空", trigger: "blur"}
          ],
          format: [
            {required: true, message: "规格不能为空", trigger: "blur"}
          ],
          price: [
            {required: true, message: "价格不能为空", trigger: "blur"}
          ],
          mnemonicCode: [
            {required: true, message: "助记码不能为空", trigger: "blur"}
          ],
          recordType: [
            {required: true, message: "项目类型不能为空", trigger: "blur"},
          ],
          deptId: [
            {required: true, message: "执行科室不能为空", trigger: "blur"},
          ]
        }
      };
        },
        created() {
          this.getList();
          this.getTreeselect();
          this.getDicts("no_drug_type").then(response => {
            this.recordTypeOptions = response.data;
          });
            listDept().then(response => {
                this.deptList = response.data;
            });
        },
        methods: {
            /** 查询非药品收费项目列表 */
            getList() {
                this.loading = true;
                listNon_drug(this.queryParams).then(response => {
                    this.non_drugList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
          // 项目类型字典翻译
          recordTypeFormat(row, column) {
            return this.selectDictLabel(this.recordTypeOptions, row.recordType);
          },
          // 取消按钮
          cancel() {
            this.open = false;
            this.reset();
          },
          /** 查询部门下拉树结构 */
          getTreeselect() {
            treeselect().then(response => {
              this.deptOptions = response.data;
            });
          },
          // 表单重置
          reset() {
            this.form = {
              id: null,
              code: null,
              name: null,
              format: null,
              price: null,
              expClassId: null,
              mnemonicCode: null,
                    recordType: null,
                    createDate: null,
                    status: 0,
                    deptId: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
              this.reset();
              this.getTreeselect();
              this.open = true;
                this.title = "添加非药品收费项目";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
              this.reset();
              this.getTreeselect();
                const id = row.id || this.ids
                getNon_drug(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改非药品收费项目";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateNon_drug(this.form).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                }
                            });
                        } else {
                            addNon_drug(this.form).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除非药品收费项目编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delNon_drug(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有非药品收费项目数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportNon_drug(queryParams);
                }).then(response => {
                    this.download(response.msg);
                }).catch(function () {
                });
            }
        }
    };
</script>
